<template>
	<view>
		<navbar title="个人资料" :opacity="1" :isbg="false" :autoBack="true"></navbar>
		<view class="con">
			<view class="con__form">
				<view class="con__form__item1">
					<view class="con__form__item__label" style="flex: 1;">
						头像
					</view>
					<image :src="URL(userinfo.avatar)" class="con__form__item__tx" mode="aspectFill" @click="upavatar">
					</image>
					<image src="/static/personal/more1.png" class="con__form__item__right" mode=""></image>
				</view>
				<view class="con__form__item">
					<view class="con__form__item__label">
						姓名
					</view>
					<input type="text" class="con__form__item__inp" placeholder="请输入姓名" v-model="userinfo.username" />
					<image src="/static/personal/more1.png" class="con__form__item__right" mode=""></image>
				</view>
				<view class="con__form__item">
					<view class="con__form__item__label">
						身份证
					</view>
					<view class="" style="flex: 1;" @click="showcard=true">
						<view class="con__form__item__inp" v-if="userinfo.idcard">
							{{userinfo.idcard}}
						</view>
						<view v-else class="con__form__item__inp" style="color: #A1A4AA;">
							请输入身份证号码
						</view>
					</view>
					<!-- <input disabled type="text" class="con__form__item__inp" placeholder="请输入身份证号码" v-model="userinfo.idcard" /> -->
					<image src="/static/personal/more1.png" class="con__form__item__right" mode=""></image>
				</view>
				<view class="con__form__item">
					<view class="con__form__item__label">
						家庭信息
					</view>
					<input type="text" class="con__form__item__inp" placeholder="请输入家庭信息" v-model="userinfo.home" />
					<image src="/static/personal/more1.png" class="con__form__item__right" mode=""></image>
				</view>
				<view class="con__form__item">
					<view class="con__form__item__label">
						手机号
					</view>
					<input type="number" maxlength="11" class="con__form__item__inp" v-model="userinfo.mobile"
						placeholder="请输入手机号" />
					<image src="/static/personal/more1.png" class="con__form__item__right" mode=""></image>
				</view>
			</view>
			<view class="con__b">
				<view class="u-flex u-flex-y-center">
					<view class="con__b__line">

					</view>
					<view class="con__b__ti">
						我的地址
					</view>
				</view>
				<view class="u-flex" style="margin-top: 46rpx;border-bottom: 1rpx solid #EBEBEB;padding-bottom: 30rpx;">
					<u--textarea autoHeight height='43rpx' border='none' placeholder="请输入我的详细地址"
						v-model="userinfo.address"></u--textarea>
					<image src="/static/personal/edit.png" class="con__b__e" mode=""></image>
				</view>
			</view>
		</view>
		<view class="footer">
			<u-button color="#3262FD" :loading="lodingbtn" @click="submit" text='确认'
				:customStyle='{width:"690rpx",height:"94rpx",margin:0,padding:0,borderRadius:"15rpx",fontSize:"32rpx"}'></u-button>
		</view>
		<u-keyboard :showCancel='false' :showConfirm='false' safeAreaInsetBottom @close='showcard=false' @change="valChange" @backspace="backspace" ref="uKeyboard" mode="card" :show="showcard"></u-keyboard>
	</view>
</template>

<script>
	import user from '@/api/_user.js'
	export default {
		data() {
			return {
				userinfo: {},
				lodingbtn: false,
				showcard: false
			};
		},
		onLoad() {
			this.userinfo = uni.getStorageSync('dkuserinfo')
		},
		methods: {
			async submit() {
				let {
					username,
					mobile
				} = this.userinfo
				if (!username) {
					uni.$u.toast('请输入姓名')
					return
				}
				if (!mobile) {
					uni.$u.toast('请输入手机号')
					return
				}
				this.lodingbtn = true
				let res = await user.profile(this.userinfo)
				let _this = this
				if (res.data.code == 1) {
					uni.$u.toast('修改成功')
					setTimeout(() => {
						_this.lodingbtn = false
						uni.navigateBack()
					}, 1000)
				}
			},
			// 按键被点击(点击退格键不会触发此事件)
			valChange(val) {
				// 将每次按键的值拼接到value变量中，注意+=写法
				if(!this.userinfo.idcard){
					this.userinfo.idcard=''
				}
				if(this.userinfo.idcard.length<18){
					this.userinfo.idcard += val;
				}else{
					this.showcard=false
				}
			},
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if (this.userinfo.idcard.length) this.userinfo.idcard = this.userinfo.idcard.substr(0, this.userinfo.idcard.length - 1);
				// console.log(this.userinfo.idcard);
			},
			upavatar() {
				let _this = this
				uni.chooseImage({
					count: 1,
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.showLoading({
							title:'正在上传'
						})
						uni.uploadFile({
							url: 'http://dn.fuliaoxx.com/api/common/upload', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							header: {
								token: uni.getStorageSync('dktoken') || ''
							},
							success: (uploadFileRes) => {
								let res = JSON.parse(uploadFileRes.data)
								// console.log(res)
									
								if (res.code == 1) {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
									_this.userinfo.avatar = res.data.url
								} else if (res.code == 401) {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
									setTimeout(() => {
										uni.reLaunch({
											url: '/pages/index/login'
										})
									}, 2000)
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							},
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.con {
		border-top: 2rpx solid #FCFCFD;
		padding-left: 20rpx;

		&__form {
			padding-bottom: 20rpx;
			border-bottom: 2rpx solid #F5F5F5;

			&__item1 {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1rpx solid #f5f5f5;
				padding: 20rpx 32rpx 20rpx 12rpx;
			}

			&__item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 34rpx 32rpx 34rpx 12rpx;

				&__tx {
					width: 111rpx;
					height: 111rpx;
					border-radius: 50%;
					margin-right: 8rpx;
					align-self: flex-end;
					background-color: #ccc;
				}

				&__label {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
					line-height: 31rpx;
				}

				&__inp {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					line-height: 31rpx;
					text-align: right;
					flex: 1;

					.uni-input-placeholder {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #A1A4AA;
					}
				}

				&__right {
					width: 12rpx;
					height: 21rpx;
					margin-left: 26rpx;
				}
			}
		}

		&__b {
			padding: 56rpx 25rpx 110rpx 36rpx;

			&__line {
				width: 7rpx;
				height: 28rpx;
				background: #3262FD;
				margin-right: 13rpx;
			}

			&__ti {
				font-family: PingFang SC;
				font-weight: 800;
				font-size: 32rpx;
				color: #0D0D0D;
				line-height: 32rpx;
			}

			&__e {
				width: 43rpx;
				height: 43rpx;
			}
		}
	}

	::v-deep.u-textarea {
		padding: 0 !important;
	}

	.footer {
		padding: 45rpx 30rpx;
		position: fixed;
		bottom: 0;
		left: 0;
	}
</style>